{% extends "base_lite.html" %}

{% block title %}欢迎使用图床系统{% endblock %}

{% block content %}
<div class="container">
    <div class="hero-section">
        <h1 class="fw-bold mb-4" style="font-size: 3rem;">
            📷 图床系统
        </h1>
        <p style="font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.9;">
            安全、快速、易用的图片存储与分享平台
        </p>
        {% if 'user_id' not in session %}
            <a href="{{ url_for('login') }}" class="btn btn-primary" style="padding: 1rem 2rem; font-size: 1.1rem;">
                🚀 立即开始
            </a>
        {% else %}
            <div class="d-flex justify-content-center gap-3 flex-wrap">
                {% if session.role == 'admin' %}
                    <a href="{{ url_for('admin_dashboard') }}" class="btn btn-primary" style="padding: 1rem 2rem;">
                        📊 管理面板
                    </a>
                {% endif %}
                <a href="{{ url_for('user_gallery') }}" class="btn btn-outline" style="padding: 1rem 2rem; color: white; border-color: white;">
                    🖼️ 图片库
                </a>
            </div>
        {% endif %}
    </div>

    <div class="feature-grid">
        <div class="feature-card">
            <div style="font-size: 3rem; margin-bottom: 1rem;">🛡️</div>
            <h4 class="mb-3">安全可靠</h4>
            <p>采用多层安全防护，支持用户权限管理，确保您的图片资源安全无忧</p>
        </div>
        <div class="feature-card">
            <div style="font-size: 3rem; margin-bottom: 1rem;">⚡</div>
            <h4 class="mb-3">极速上传</h4>
            <p>支持拖拽批量上传，智能压缩与缩略图生成，让您的工作效率翻倍</p>
        </div>
        <div class="feature-card">
            <div style="font-size: 3rem; margin-bottom: 1rem;">🎛️</div>
            <h4 class="mb-3">智能管理</h4>
            <p>现代化管理界面，支持搜索筛选、批量操作，让图片管理变得简单</p>
        </div>
    </div>

    {% if 'user_id' in session %}
    <div class="card mt-4">
        <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;">
            <div>
                <h5 class="mb-2">欢迎回来，{{ session.username }}！ 👋</h5>
                <p class="text-muted mb-0">
                    您当前的身份是：
                    <span style="background: var(--primary); color: white; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.875rem;">
                        {% if session.role == 'admin' %}👨‍💼 管理员{% else %}👤 普通用户{% endif %}
                    </span>
                </p>
            </div>
            <div class="d-flex gap-2">
                {% if session.role == 'admin' %}
                    <a href="{{ url_for('admin_dashboard') }}" class="btn btn-primary btn-sm">
                        📊 管理
                    </a>
                {% endif %}
                <a href="{{ url_for('user_gallery') }}" class="btn btn-outline btn-sm">
                    🖼️ 浏览
                </a>
            </div>
        </div>
    </div>
    {% else %}
    <div class="card mt-4">
        <div class="text-center">
            <h5 class="mb-3">🎯 快速开始</h5>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem;">
                <div style="text-align: center;">
                    <div style="width: 60px; height: 60px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem;">
                        👨‍💼
                    </div>
                    <h6 class="fw-bold">管理员账号</h6>
                    <p class="text-muted mb-2">用户名: <code>admin</code></p>
                    <p class="text-muted mb-3">密码: <code>admin123</code></p>
                    <div style="font-size: 0.875rem; color: var(--success);">
                        ✓ 上传管理图片<br>
                        ✓ 查看统计信息
                    </div>
                </div>
                <div style="text-align: center;">
                    <div style="width: 60px; height: 60px; background: #6b7280; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem;">
                        👤
                    </div>
                    <h6 class="fw-bold">普通用户账号</h6>
                    <p class="text-muted mb-2">用户名: <code>user</code></p>
                    <p class="text-muted mb-3">密码: <code>user123</code></p>
                    <div style="font-size: 0.875rem; color: var(--primary);">
                        ✓ 浏览图片库<br>
                        ✓ 查看图片详情
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}
